import React, { Component } from 'react';
import PropTypes from 'prop-types'; //引入参数类型校验的包

// ❤ 注：
// 1）函数式组件：【无状态组件】，没有state,this,生命周期函数
// 2）class类组件：【有状态组件】，有state,this，生命周期函数

import logo from "../logo192.png";

export class Main extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value:"1", //双向数据绑定的值
    }
  }

  onChangeValue = (e) => {
    console.log(e.target.value);
    this.setState({
      value: e.target.value //赋值给value
    })
  }

  render() {
    const { list,add, del, change, color } = this.props; //接收父组件传来的参数
    const { value } = this.state; //解构
    return (
      <div className='main'>
        <div className="add">
          {/* ❤ 给input实现双向绑定数据： 用户输入--》数据改变 --》页面改变  */}
          {/* ❤ react中实现双向数据绑定：绑定表单值【value,checked...】，添加onchange事件 */}
          <input type="text" value={value} onChange={this.onChangeValue} />
          <button onClick={()=> {
            add(value); //调用父亲传来的函数，再把value传给父亲
            this.setState({
              value:"", //点击完之后清空输入框中的内容
            })
          }}>添加</button>
        </div>
        <ul className='todoList'>
          {
            list.length ?
              list.map(item => {
                return <li key={item.id}>
                  <input type="checkbox" 
                  checked={item.state} //双向数据绑定
                  onChange={() => {
                    change(item.id) //调用父亲传来的函数
                  }}
                  />
                  <b>{item.title}</b>
                  {item.state ? <button style={{background:color}}>已完成</button> : <button>未完成</button>}
                  <span onClick={() => {
                    del(item.id);
                  }}>X</span>
                </li>
              }) : <img src={logo} alt="" />
          }

        </ul>
        <ul>

        </ul>
      </div>
    )
  }
}


// react官网
// 1）搜PropTypes
// 类型校验--PropTypes   注：跟在组件后面的是小写的p，引入用作参数校验的是大写的P
Main.propTypes = {
  list: PropTypes.array,
  add:PropTypes.func.isRequired,
  del:PropTypes.func.isRequired,
  change:PropTypes.func.isRequired, //必传
};

// 2）搜defaultProps
// 设置默认值---如果没有使用，则使用默认的
Main.defaultProps = {
  list: [],
  color:"red"
};


export default Main